<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <title>手机号登录</title>
  <link rel="stylesheet" href="css/dialog.css">
  <style>
    #app {
      padding: 0 4vw;
    }

    .login-title {
      padding-top: 40vw;
    }

    .login-title span {
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #222222;
    }
    .login-title p{
      font-family: PingFangSC-Regular;
      font-size: 15px;
      color: #666666;
      line-height: 15px;
      padding-top: 4vw;
    }
    .login-form{
      padding-top: 6vw;
    }
    .form-row{
      display: flex;
      margin-top: 8vw;
      align-items: center;
      border-bottom: 1px solid #e1e1e1;
      padding-bottom: 8px;
    }
    .form-icon{
      display: inline-flex;
      align-items: center;
    }
    .form-icon>img.icon-phone{
      width: 32px;
      height: 32px;
    }
    .form-icon>img.icon-arrow{
      width: 16px;
      height: 16px;
    }
    .form-icon>span{
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #000000;
    }
    .form-input{
      flex: 1;
    }
    .form-input input{
      outline: none;
      border: none;
      -webkit-appearance: none;
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #222222;
      padding-left: 10px;
      width: 100%;
    }
    .form-input input::placeholder{
      font-family: PingFangSC-Regular;
      font-size: 18px;
      color: #CCCCCC;
    }
    .get-code span{
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #0240FF;
    }
    .login-btn{
      margin-top: 14vw;
      background: #0240FF;
      border-radius: 21px;
      padding: 2.8vw 0;
      text-align: center;
    }
    .login-btn span{
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      color: #FFFFFF;
      letter-spacing: 0;
    }
    .error-tip{
      margin-top: 8px;
    }
    .error-tip span{
      font-family: PingFangSC-Regular;
      font-size: 12px;
      color: #FF3467;
    }
  </style>
</head>
<body>
<div id="app" class="login" v-cloak>
  <div class="login-title">
    <span>手机号登录</span>
    <p>首次使用手机号登录将自动为您注册</p>
  </div>
  <div class="login-form">
    <div class="form-row">
      <div class="form-icon">
        <img class="icon-phone" src="img/phone.png" alt="">
        <span>+86</span>
        <img class="icon-arrow" src="img/right.png" alt="">
      </div>
      <div class="form-input">
        <input @focus="resetMsg()" v-model="phone" type="text" maxlength="11" placeholder="请输入新手机号">
      </div>
    </div>
    <div class="error-tip" v-if="phoneError">
      <span>{{phoneError}}</span>
    </div>
    <div class="form-row">
      <div class="form-icon">
        <img class="icon-phone" src="img/code.png" alt="">
      </div>
      <div class="form-input">
        <input @focus="resetMsg()" v-model="code" type="text" maxlength="6" placeholder="请输入验证码">
      </div>
      <div class="get-code" @click="getCode()">
        <span v-if="num === 60">{{codeMsg}}</span>
        <span style="color: #ccc" v-if="num < 60">{{codeMsg}}</span>
      </div>
    </div>
    <div class="error-tip" v-if="codeError">
      <span>{{codeError}}</span>
    </div>
  </div>
  <div class="login-btn" @click="login()">
    <span>登录</span>
  </div>
</div>
<script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
<script src="js/zepto.min.js"></script>
<script src="js/dialog.js"></script>
<script src="js/vue.min.js"></script>
<script>
  var vConsole = new window.VConsole();
  (function () {
    new Vue({
      el: '#app',
      data: {
        phone:'',
        code:'',
        phoneError:null,
        codeError:null,
        num: 60,
        tm: null,
        codeMsg:'获取验证码'
      },
      methods: {
        //校验手机号是否合法
        isPhoneNum(tel){
          var reg = /^((1)+\d{10})$/;
          if (!reg.test(tel)) {
            this.phoneError = '请输入有效的手机号码！';
            return false;
          } else {
            return true;
          }

        },

        //校验验证码是否合法
        isCode(c){
          var regCode = /^(\d{6})$/;
          if (!regCode.test(c)) {
            this.codeError = '请输入有效的验证码！';
            return false;
          } else {
            return true;
          }
        },
        resetMsg(){
          if(this.phoneError) this.phoneError = null;
          if(this.codeError) this.codeError = null;
        },
        login(){
          if(!this.isPhoneNum(this.phone)) return;
          if(!this.isCode(this.code)) return;
          var that = this;
          $.ajax({
            url: 'http://81.70.85.144:8383/user/loginByTelephone',
            type: 'POST',
            contentType: 'application/json',
            xhrFields: {withCredentials: true},
            data: JSON.stringify({
              'code': that.code,   // 验证码
              'telephone': that.phone   // 手机号
            }),
            success: function (data) {
              if (data && data.code === 0) {
                localStorage.clear();
                localStorage.setItem('phone', that.phone);
                localStorage.setItem('times', '30');
                window.location.href = 'index.html';
              } else {
                that.showNotice(data ? data.message : '登陆失败');
              }
            },
            error: function (err) {
              that.showNotice(err ? err.message : '登陆失败');
            }
          });
        },
        getCode(){
          var that = this;
          if (this.num < 60) return;
          if(this.phone && this.isPhoneNum(this.phone)){
            this.tm && clearInterval(this.tm);
            this.getCodeRequest(this.phone);
            this.num = 60;
            this.tm = setInterval(function () {
              that.num--;
              that.codeMsg = that.num +'s后重发';
              if (that.num === 0) {
                that.codeMsg = '获取验证码';
                that.num = 60;
                clearInterval(that.tm);
              }
            }, 1000);
          }
        },

        getCodeRequest(tel){
          var that = this;
          $.ajax({
            url: 'http://81.70.85.144:8383/user/sendSMS?telephone=' + tel,
            type: 'GET',
            xhrFields: {withCredentials: true},
            success: function (data) {
              if (data && data.code === 0) {
                that.showNotice('发送成功');
              } else {
                that.showNotice(data ? data.message : '发送失败');
              }
            },
            error: function (err) {
              that.showNotice(err ? err.message : '发送失败');
            }
          });
        },

        showNotice(text) {
          $(document).dialog({
            type : 'notice',
            style:'ios',
            infoText: text,
            autoClose: 3000,
            position: 'center'
          });
        }
      },
      mounted() {
      }
    });
  })();
</script>
</body>
</html>
